/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-10-09 14:41:30
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-10-19 10:27:50
 * @FilePath: /utools_web/src/layouts/components/filecard.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import IconFont from '@/components/IconFont';
import downloadFile from '@/utils/downloadFile';
import genaratorType from '@/utils/genaratorType';
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Divider, Image, message, Modal, theme } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import { difftime } from '@/utils/time';


function FileCard({ item, common = false }) {
    const { token } = theme.useToken();
    const { colorBgSecondary, colorText, colorPrimary, colorBgFourth, colorBgThird } = token;
    const type = genaratorType(item?.name);
    const [modal, setModal] = useState({
        open: false,
        onCancel: () => {
            setModal((s) => ({
                ...s,
                open: false,
            }));
        },
    });

    const Dom =
        type === 'img' ? (
            <div style={{ width: 46, height: 46, overflow: 'hidden', borderRadius: 8 }}>
                <Image
                    src={item?.path}
                    shape="square"
                    width={46}
                    height={46}
                    style={{ objectFit: 'cover' }}
                />
            </div>
        ) : (
            <IconFont type={`icon-${type}`} style={{ fontSize: '48px' }} />
        );

    return (
        <>
            <Modal {...modal} width={'calc(100vw - 40px)'} footer={false} style={{ top: 20 }}>
                {modal?.type === 'mp3' ? (
                    <div className="center">
                        <audio src={modal?.url} controls />
                    </div>
                ) : modal?.type === 'mp4' ? (
                    <video
                        src={modal?.url}
                        controls
                        style={{ width: '100%', height: 'calc(100vh - 110px)' }}
                    />
                ) : (
                    <iframe
                        src={PREVIEW + encodeURIComponent(modal?.url)}
                        style={{ width: '100%', height: 'calc(100vh - 110px)', border: 'none' }}
                    />
                )}
            </Modal>

            <div
                style={{
                    backgroundColor: colorBgFourth,
                    marginBottom: 12,
                    padding: 12,
                    borderRadius: 8,
                    width: '100%',
                    border: '2px solid transparent',
                    transition: 'border 0.1s ease-in-out',
                    cursor: 'pointer',
                    display: 'flex',
                    position: 'relative',
                }}
                onClick={(e) => {
                    if (type === 'img') {
                        return;
                    }
                    const vs = { open: true };
                    if (['word', 'xlsx', 'ppt', 'pdf', 'img', 'mp3', 'mp4'].includes(type)) {
                        if (['word', 'xlsx', 'ppt', 'pdf'].includes(type) && window.utools) {
                            window.utools.ubitemser
                                .goto(PREVIEW + encodeURIComponent(item?.path))
                                .run({ width: 980, height: 640 });
                            return;
                        }
                        setModal((s) => ({
                            ...s,
                            ...vs,
                            title: '预览' + item?.name,
                            url: item?.path,
                            type: type,
                        }));
                    } else {
                        message.warning('文件格式不支持在线预览，正在下载...');
                        downloadFile(item?.path, item?.name);
                    }
                }}
            >
                {Dom}
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'space-between',
                        paddingLeft: 12,
                        flex: 1
                    }}
                >
                    <h4 className='spread' style={{ width: "100%" }}>
                        <span>
                            {item?.name}
                        </span>

                        <span>
                            {item?.createUserName}
                        </span>
                    </h4>
                    <span>
                        {
                            item?.projectName &&
                            <>
                                {item?.projectName} <Divider type="vertical"></Divider>
                            </>
                        }
                        上传于{' '}
                        {difftime(dayjs(), dayjs(item?.createTime))}
                    </span>
                </div>

                <Button size='small' style={{ position: 'absolute', right: 12, bottom: 8 }} icon={<DownloadOutlined
                    onClick={(e) => {
                        e.stopPropagation();
                        downloadFile(item?.path, item?.name);
                    }}
                ></DownloadOutlined>}>
                </Button>

            </div>
        </>
    );
}

export default FileCard;
